<template>
    <div class="mdLayout">
        <el-popover  
                :show-arrow="false"
                trigger="hover"
                :teleported="false"
                popper-style="width:100%;"
            >
                <template #reference>
                    <div class="title">
                        <span v-html="props.totalList[0].title"></span>
                        <span>选集<el-icon><ArrowDown /></el-icon></span>
                    </div>
                </template>
                <template #default>
                    <div class="listInfo">
                        <p v-for="item in props.totalList" :key="item.id">
                            <span v-html="item.title"></span>
                            <span   v-if="item.badges" 
                                    :style="{ 'color':item.badges[0].text_color,'background-color':item.badges[0].border_color }"
                            >{{ item.badges[0].text }}</span>
                        </p>
                    </div>
                </template>
            </el-popover>
    </div>
</template>

<script lang="ts" setup>
interface item{
    badges:[{
        text:string     //盒子上的文字
        text_color:string   //标签上字体颜色
        border_color:string
        border_color_night:string
        text_color_night:string
    }]
    id:number
    index_title:string
    cover:string
    log_title:string
    title:string
    url:string
}
interface Props{
    width:number
    totalList:Array<item>
}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    padding: 0;
    margin: 0;
}
.mdLayout{
    position: relative;
    width: 80%;
    height: 100%;
    max-width: 320px;
}
.title{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #61666D;
    border: 1px solid #E3E5E7;
    border-radius: 8px;
    padding: 0 10px;
    & span:nth-child(1){
        width: 80%;
        @include noWrap;
    }
    & span:nth-child(2){
       white-space: nowrap;
        color: #9499A0;
        @include flexRowCenter;
        gap: 5px;
    }
    &:hover {
        background: #E3E5E7;
    }
    & span:nth-child(2) i{
        transition: all 0.5s;
    }
    &:hover span:nth-child(2) i{
        rotate: -180deg;

    }
}
.listInfo{
    padding: 10px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    font-size: 14px;
    color: #61666D;
    & p{
        width: 100%;
        box-sizing: border-box;
        padding: 7px 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    & p span:nth-child(1){
        @include noWrap;
    }
    & p span:nth-child(2){
        white-space: nowrap;
        padding: 0 2px;
        border-radius: 4px;
        scale: 0.7;
    }
    & p:hover{
        background: #E3E5E7;
    }
}
</style>